<template>
	<app-layout>
		<view v-if="!goods" class="u-goods-detail"></view>
		<view v-if="goods">
			<view>
				<app-goods-banner :pic-list="goods.pic_url" :share="goods.share" :goods_id="goods.id"
					:video-url="goods.video_url"></app-goods-banner>
			</view>
			<view class="other-info">
				<!-- 10.18 将金币专用圈起 -->
				<view class="goods-name">
					<!-- <text class="goodcatname">{{goods.name.substring(0,6)}}</text>
					{{goods.name.substring(6)}} -->
					{{goods.name}}
				</view>
				<view v-if="goods.subtitle" class="goods-subtitle">
					<!-- <view class="t-omit-three">{{goods.subtitle}}</view> -->
					<view class="t-omit-three">去实体店体验</view>
				</view>
				<view class='price main-between'>
					<view>
						<view :class="getTheme+ '-m-text ' + getTheme">
							<block v-if="goods.price > 0">{{goods.price}}元</block>
						</view>
					</view>
					<!-- 成为店主 -->
					<view class="getgold" @click="applystore">
						成为店主
					</view>
					<view class="share" @click="shareClick">
						<image src="/static/image/icon/icon-share.png"></image>
						<view>分享</view>
					</view>
				</view>
			</view>
			<view>
				<app-share-qr-code v-model="shareShow" :url="shareUrl" :has-poster-nav="true"
					:poster-config="poster_config + `&goods_id=` + goods.id"
					:poster-generate="poster_generate + `&goods_id=` + goods.id"></app-share-qr-code>
			</view>
			<view>
				<app-service :guarantee_title="goods.guarantee_title" :guarantee_pic="goods.guarantee_pic"
					:list="goods.services"></app-service>
			</view>
			<!-- <view class="goods-margin" @click="integral">
				<view class="u-service cross-center">
					<view class="box-grow-0 u-text">怎样获得金币</view>
					<image class="u-icon-del" src="/static/image/icon/arrow-right.png"></image>
				</view>
			</view> -->
			<view class="attr" :style="{marginTop: goods.type === 'goods' ? '24rpx ' : '12rpx'}">
				<!-- rightText="立即兑换" -->
				<u-attr v-model="attrShow" :themeObject="themeObject" :checked="selectAttr" :goods="goods" ref="issjo"
					@check="onAttr" :is_show_left="false" :is_show_right="false" :nocbp="nocbp"
					:ishopkeeper="ishopkeeper" :rightFunc="true" @rightFunc="rightFunc">
					<!-- <view slot="btn">
						<app-goods-attr v-if="goods.type === 'goods'" :attr-groups="goods.attr_groups"
							:selectAttr="selectAttr"></app-goods-attr>
					</view> -->
					<view slot="priceBefore" v-if="selectAttr.extra.value != 0">
						{{selectAttr.extra.value}}{{selectAttr.extra.name}} +
					</view>
				</u-attr>
			</view>
			<view>
				<app-goods-coupon :theme="getTheme" @change="setCoupon" :coupons="goods.goods_coupon_center">
				</app-goods-coupon>
			</view>
			<view class="marketing">
				<app-goods-marketing :express="goods.express" :limit="goods.goods_marketing.limit"
					:shipping="goods.goods_marketing.shipping" :pickup="goods.goods_marketing.pickup"
					:balance="goods.goods_marketing_award.balance" :card="goods.goods_marketing_award.card"
					:coupon="goods.goods_marketing_award.coupon" :integral="goods.goods_marketing_award.integral"
					:theme="getTheme"></app-goods-marketing>
			</view>
			<!-- <view class="detail">
				<image src="/static/image/icon/goods-detail.png"></image>
				<view style="padding: 0 24rpx;">
					<app-rich-text :content="goods.detail"></app-rich-text>
				</view>
			</view> -->
			<view class="detail">
				<view class="detail-title">
					商品详情
				</view>
				<view class="" style="padding-bottom: 0.5em;">
					<image :src="item.icon_url" mode="widthFix" v-for="(item,index) in intimgs" :key="index"
						v-if="index < 2"></image>
				</view>
				<view>
					<app-rich-text :content="goods.detail"></app-rich-text>
				</view>
				<view class="" style="padding-bottom: 0.5em;">
					<image :src="item.icon_url" mode="widthFix" v-for="(item,index) in intimgs" :key="index"
						v-if="index >= 2"></image>
				</view>
			</view>
			<!-- 底部空格 -->
			<view class="safe-area-inset-bottom">
				<view class="u-bottom-height"></view>
			</view>
			<view class="safe-area-inset-bottom u-bottom-fixed">
				<view class="app-bottom dir-left-nowrap">
					<view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
						<image src="/static/image/icon/index.png"></image>
						<view>首页</view>
					</view>
					<view class="dir-top-nowrap main-center cross-center little box-grow-0 red" @click="shareClick">
						<image src="/static/image/icon/icon-share.png"></image>
						<view>分享</view>
					</view>
					<view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="favorite">
						<image
							:src="goods.favorite ? '/static/image/icon/icon-favorite-active.png' : '/static/image/icon/icon-favorite.png'">
						</image>
						<view>收藏</view>
					</view>
					<!-- <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="custom">
						<image src="/static/image/summary-phone.png"></image>
						<view>客服</view>
					</view> -->
					<view v-if="goods.goods_stock == 0" class="dir-left-nowrap box-grow-1">
						<view class="main-center cross-center button" style="background-color: #CDCDCD;color: #fff;">已售罄
						</view>
					</view>
					<!-- <view v-else-if="nocbp" class="dir-left-nowrap box-grow-1">
						<view class="main-center cross-center button" style="background-color: #CDCDCD;color: #fff;">
							已下过单
						</view>
					</view> -->
					<!-- <view v-else-if="!ishopkeeper" class="dir-left-nowrap box-grow-1">
						<view class="main-center cross-center button" style="background-color: #CDCDCD;color: #fff;">
							请先成为店主
						</view>
					</view> -->
					<view class="dir-left-nowrap box-grow-1" v-else>
						<view class="main-center cross-center button" :class="getTheme + '-m-back ' + getTheme"
							@click="clickAttr">立即购买
						</view>
					</view>
				</view>
			</view>
			<view class="quick-box" @click="tostore">
				规划4500家实体店
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
	import appService from "../../../components/page-component/goods/app-goods-service.vue";
	import appGoodsAttr from "../../../components/page-component/goods/app-goods-attr.vue";
	import appGoodsMarketing from "../../../components/page-component/goods/app-goods-marketing.vue";
	import appRichText from "../../../components/basic-component/app-rich/parse.vue";
	import appComments from "../../../components/page-component/app-comments/app-comments.vue";
	import appRecommendedProduct from "../../../components/page-component/app-recommended-product/app-recommended-product.vue";
	import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
	import appGoodsCoupon from "../../../components/page-component/goods/app-goods-coupon.vue";
	import uAttr from '../../../components/page-component/goods/u-attr.vue';

	export default {
		name: "goods",
		components: {
			appGoodsBanner,
			appShareQrCode,
			appService,
			appGoodsAttr,
			appGoodsMarketing,
			appRichText,
			appComments,
			appRecommendedProduct,
			appGoodsCoupon,
			uAttr
		},
		data() {
			return {
				goods: null,
				selectAttr: null,
				recommend_list: null,
				shareShow: false,
				shareUrl: null,
				attrShow: false,
				loading: false,

				poster_config: this.$api.oneyuan_mall.poster_config,
				poster_generate: this.$api.oneyuan_mall.poster_generate,
				intimgs: [],

				ishopkeeper: false,
				nocbp: false
			};
		},
		computed: {
			...mapState({
				mall: state => state.mallConfig.mall,
				isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			}
		},
		onLoad(options) {
			let that = this;
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			that.allReq();
			that.loadData(options.goods_id);
			that.getInfo()
			that.$request({
				url: that.$api.oneyuan_mall.iscanorder
			}).then(res => {
				if (res.code == 0) {
					that.nocbp = false
				} else {
					that.nocbp = true
				}
			})
		},
		onShareAppMessage: function() {
			return this.$shareAppMessage({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : this.goods.cover_pic,
				path: "/plugins/oneyuan_mall/goods/goods",
				params: {
					goods_id: this.goods.id
				}
			});
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				query: {
					goods_id: this.goods.id
				} // 此处填写页面的参数
			});
		},
		// #endif
		methods: {
			// 11.10 点击显示弹框 tasklist 的浅蓝框
			getgold() {
				this.$refs.task.isshow = true
			},
			applystore() {
				uni.navigateTo({
					url: '/pages/bepartner/apply/apply'
				})
			},
			integral() {
				uni.navigateTo({
					url: '/pages/video/explain/explain?id=30&title=' + '怎样获得金币'
				})
			},
			// 公共图片
			allReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 272,
						status: 1
					}
				}).then((res) => {
					this.intimgs = res.data.list
				}).catch(() => {

				})
			},
			loadData(id) {
				this.$showLoading();
				this.$request({
					url: this.$api.oneyuan_mall.goods_detail,
					data: {
						id: id
					}
				}).then(response => {
					this.$hideLoading();
					let {
						code,
						data,
						msg
					} = response;
					if (code === 0) {
						this.goods = data.detail;
						this.shareUrl = this.$api.oneyuan_mall.poster + '&goods_id=' + id;
						this.goods.id = id;
						this.loading = true;
					} else {
						uni.showModal({
							title: '提示',
							content: msg,
							showCancel: false
						});
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			onAttr(data) {
				this.selectAttr = data;
			},
			shareClick() {
				this.shareShow = true;
			},
			custom() {
				// 9.8注释
				/* if (this.kefu != '') {
					uni.navigateTo({
						url: '/pages/web/web?url=' + encodeURIComponent(this.kefu)
					})
				} else {
					uni.navigateTo({
						url: '/pages/web/web?url=' + this.mall.setting.web_service_url
					})
				} */
				// 9.8 修改客服
				if (wx.openCustomerServiceChat) {
					wx.openCustomerServiceChat({
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfc2132bcfa45f0fb28'
						},
						corpId: 'ww4e635c5ebdf96587',
						showMessageCard: true
					})
				} else {
					uni.showModal({
						title: '版本不支持',
						content: '请下载最新版本微信',
						showCancel: false,
						confirmText: '我知道了'
					})
				}
				/* if (this.kefu != '') {
					uni.navigateTo({
						url: '/pages/web/web?url=' + this.kefu
					})
				} else {
					uni.navigateTo({
						url: '/pages/web/web?url=' + this.mall.setting.web_service_url
					})
				} */
			},
			back() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			favorite() {
				let url = this.$api.user.favorite_add;
				let favorite = true;
				if (this.goods.favorite) {
					url = this.$api.user.favorite_remove;
					favorite = false;
				}
				this.goods.favorite = favorite;
				this.$request({
					url: url,
					data: {
						goods_id: this.goods.id
					}
				}).then(response => {
					if (response.code === 0) {
						if (response.msg) {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							})
						}
					} else {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false
						});
					}
				});
			},
			clickAttr() {
				this.$refs.issjo.isshos = true
				this.attrShow = true;
			},
			setCoupon(index) {
				this.$set(this.goods.goods_coupon_center[index], 'is_receive', 1);
			},
			rightFunc: function(data) {
				// 10.9 添加 传 是 金币商城 的商品 &signti=oneyuan_mall
				uni.navigateTo({
					url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([data])}&preview_url=${encodeURIComponent(this.$api.oneyuan_mall.order_preview)}&submit_url=${encodeURIComponent(this.$api.oneyuan_mall.order_submit)}&signti=oneyuan_mall`
				});
			},
			tostore() {
				/* uni.navigateTo({
					url: '/pages/order-submit/store-pick?isshow=true'
				}) */
				uni.navigateTo({
					url: '/pages/turnover/videolist?type=20&title=实体店'
				})
			},
			async getInfo() {
				let self = this
				const res = await self.$request({
					url: self.$api.user.user_info,
					method: 'get',
				})
				if (res.code == 0) {
					// 申请后有user vid的直接进入这一步
					if (res.data.vdian_id != null) {
						self.appStatus(res.data.vdian_id)
					}
				}
			},
			async appStatus(id = 0) {
				let self = this
				const res = await self.$request({
					url: self.$api.apply.store,
					data: {
						id: id
					},
					method: 'get',
				})
				if (res.code == 0) {
					// 申请后有user vid的直接进入这一步
					if (res.code == 0 && res.data.is_delete == 0) {
						if (res.data.review_status == 1) {
							self.ishopkeeper = true
						} else {
							self.ishopkeeper = false
						}
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.goods-margin {
		margin-top: 20upx;
	}

	.u-service {
		height: 100upx;
		background-color: #fff;
		font-size: 26upx;
		padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.u-red {
		color: #fe0000;
		font-size: 32rpx;
		font-weight: bold;

		.canmore {
			width: 175rpx;
			height: 44rpx;
			border-radius: 60rpx;
			background: #ed9196;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 24rpx;
			color: #332d24;
			display: inline-flex;
			align-items: center;
			justify-content: space-around;
		}

		.image {
			width: 12upx;
			height: 22upx;
		}
	}

	.u-text {
		color: #999999;
	}

	.u-icon-del {
		width: 12upx;
		height: 22upx;
		display: block;
	}

	.preventTouchMove {
		top: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		position: fixed;
		z-index: 0;
	}

	.other-info {
		background-color: #fff;
		padding: #{24rpx};
		margin-bottom: #{20rpx};
	}

	.goods-name {
		background-color: #ffffff;
		color: $uni-important-color-black;
		margin-bottom: #{24rpx};
	}

	// 10.18
	.goodcatname {
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #fe0000;
		padding: 6rpx 24rpx;
		border-radius: 24rpx;
		margin-right: 6rpx;
	}

	.goods-subtitle {
		font-size: 24rpx;
		background-color: #ffffff;
		color: #999999;
		margin-bottom: #{24rpx};
	}

	.attr {
		background-color: #f7f7f7;
	}

	.recommend {
		.recommend-title {
			margin: #{40rpx} 0 #{32rpx} 0;
			font-size: $uni-font-size-weak-one;
			color: $uni-general-color-two;

			.border {
				border-top: #{1rpx} solid #bbbbbb;
				height: 0;
				width: #{40rpx};
				margin: 0 #{24rpx};
			}

			image {
				width: #{24rpx};
				height: #{24rpx};
				display: block;
				margin-right: #{12rpx};
			}
		}
	}

	.u-bottom-height {
		height: 110upx;
	}

	.app-bottom {
		width: 100%;
		height: #{110rpx};
		font-size: $uni-font-size-general-one;

		.little {
			width: #{110rpx};
			height: 100%;
			background-color: #ffffff;
			font-size: #{20rpx};
			color: $uni-general-color-two;

			&.red {
				color: $uni-important-color-red;
			}

			&:first-child {
				border-right: #{1rpx} solid #e2e2e2;
			}

			&+.little {
				border-right: #{1rpx} solid #e2e2e2;
			}

			image {
				width: #{40rpx};
				height: #{40rpx};
				display: block;
				margin-bottom: #{10rpx};
			}
		}

		.button {
			width: #{650rpx};
			height: #{110rpx};
			color: #ffffff;
		}

		.service {
			background-color: #446dfd;
			color: #ffffff;
		}

		.contact-tel {
			background-color: #f39800;
			color: #ffffff;
		}

		.contact {
			background-color: #4cbf2a;
			color: #ffffff;
		}
	}

	.comments {
		margin-bottom: #{20rpx};
		background-color: #ffffff;
	}

	// .detail {
	// 	background-color: #ffffff;

	// 	image {
	// 		width: 100%;
	// 		height: #{80rpx};
	// 		display: block;
	// 	}
	// }

	.detail {
		background-color: #ffffff;
		padding: #{0 24upx};

		.detail-title {
			background-image: url(../../../static/image/icon/line.png);
			background-size: 100% 100%;
			height: #{80rpx};
			line-height: 80rpx;
			text-align: center;
			font-size: 24rpx;
			color: #353535;
		}

		image {
			width: 100%;
			height: #{80rpx};
			display: block;
		}
	}

	// 11.10 怎样获得金币
	.getgold {
		color: #FFFFFF;
		background-color: #ff4544;
		font-size: 36rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 24rpx;
		border-radius: 16rpx;
	}

	.gold {
		margin-top: #{16rpx};
		color: #FFFFFF;
		align-items: center;

		.lgold {
			background-color: #ff4544;
			border-radius: 16rpx;
			width: 360rpx;
			margin: 0 auto;
			font-size: 36rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
		}

		image {
			width: 136rpx;
			height: 136rpx;
			// margin-bottom: #{10rpx};
		}
	}

	.price {
		font-size: #{40rpx};
		color: #ff4544;
		font-family: DIN;
		background-color: #fff;
		position: relative;
	}

	.price image {
		height: #{44rpx};
		width: #{44rpx};
		display: block;
		float: left;
		margin-right: #{16rpx};
	}

	.share {
		margin-right: #{20rpx};
		margin-top: #{-10rpx};
		font-size: $uni-font-size-weak-two;
		// color: $uni-general-color-one;
		color: $uni-important-color-red;

		image {
			width: #{40rpx};
			height: #{40rpx};
			margin-bottom: #{10rpx};
		}
	}

	.original {
		background-color: #fff;
		text-decoration: line-through;
		// color: #888;
		color: #ff4544;
		height: #{60rpx};
		line-height: #{60rpx};
		// font-size: #{24rpx};
	}

	.u-bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1602;
		background-color: #ffffff;
	}

	// 实体店
	.quick-box {
		position: fixed;
		right: 48rpx;
		z-index: 100;
		bottom: 90px;
		width: 100rpx;
		height: 150rpx;
		overflow: hidden;
		border-radius: 10rpx;
		background: #FFFFFF;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		color: #ff2f2f;
	}
</style>
